<template>
  <!-- 定义一个文件上传的input标签，当文件改变时，调用handleFileUpload方法 -->
  <input type="file" @change="handleFileUpload" />
  <br />
  <img style="width: 100px; height: 100px" :src="imageString" alt="" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import OSS from 'ali-oss'

// 创建一个OSS客户端对象
const client = new OSS({
  region: 'oss-cn-hangzhou', //替换为你的OSS地域节点
  accessKeyId: 'LTAI5tCYF2TAR8tRz4s7BEZj', //替换为你的AccessKey ID
  accessKeySecret: '0pxipsBViEUdBF5m8SZfTzceqeFydg', //替换为你的AccessKey Secret
  bucket: '2202-wd' //替换为你的存储空间名称
})
// 定义一个ref变量，用于存储图片的base64编码字符串
const imageString: any = ref('')
// 定义一个方法，用于处理文件上传
const handleFileUpload = (event:any) => {
  // 获取上传的文件
  const file = event.target.files[0]
  // 创建一个FileReader对象
  const reader = new FileReader()
  // 当文件读取完成时，将图片的base64编码字符串赋值给imageString
  reader.onload = (e:any) => {
    imageString.value = e.target.result
    // 打印图片的base64编码字符串
    console.log(imageString.value)
    const uploadImage = async () => {
      const base64Data = imageString.value.split(',')[1]
      const blob = await fetch(`data:image/jpeg;base64,${base64Data}`).then((r) => r.blob())
      const fileName = new Date().getTime() + '.png' //替换为你想要的文件名
      try {
        const result = await client.put(fileName, blob)
        console.log('上传成功', result)
      } catch (error) {
        console.error('上传失败', error)
      }
    }
    uploadImage()
  }
  // 将文件读取为base64编码字符串
  reader.readAsDataURL(file)
}
</script>